<template>
  <div class="integral">
    <div class="operation">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="上架商品" name="first" />
        <el-tab-pane label="下架商品" name="second" />
      </el-tabs>
    </div>
    <div class="top">
      <div class="d-flex">
        <Input placeholder="请输入商品名称/货号" @search="handleSearch" />
      </div>
      <el-button class="add" @click="$router.push({path:'/integral/edit'})">添加</el-button>
    </div>
    <div class="bottom">
      <el-table :data="tableData" style="width: 100%" :height="height">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="name" label="名称" width="300">
          <template slot-scope="scope">
            <div class="d-flex">
              <el-avatar shape="square" :size="70" :src="scope.row.cover" />
              <div class="ml">
                <p>{{ scope.row.name }}</p>
                <p>货号：KQ001</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="配送方式" width="180">
          <template slot-scope="scope">
            <div>
              <span v-show="scope.row.delivery_type == 0">默认</span>
              <span v-show="scope.row.delivery_type == 1">自提</span>
              <span v-show="scope.row.delivery_type == 2">快递</span>
              <span v-show="scope.row.delivery_type == 3">自提+快递</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="积分" />
        <el-table-column prop="stock_count" label="库存" sortable />
        <el-table-column label="排序">
          <template slot-scope="scope">
            <div>
              <el-input
                v-model="scope.row.sort"
                size="medium"
                style="width: 50px"
                @blur="handleBlur(scope.row)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updated_at" label="上架时间" />
        <el-table-column prop="address" label="操作" fixed="right" width="300">
          <template slot-scope="scope">
            <span
              v-show="scope.row.is_open == 0"
              class="col-blue"
              @click="changeIntegralStatus(scope.row,1)"
            >上架</span>
            <span
              v-show="scope.row.is_open == 1"
              class="col-blue"
              @click="changeIntegralStatus(scope.row,0)"
            >下架</span>
            <span class="col-blue" @click="editClick(scope.row)">编辑</span>
            <span class="col-red" @click="delGoods(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page.sync="page"
          :page-size="size"
          layout="total,prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Input from "@/common/input";
// import Pagination from '@/common/pagination'
import Resize from "@/common/mixins/resize";
import {
  getIntegralList,
  changeIntegralStatus,
  delIntegral,
  sortIntegral
} from "@/api/http/integral";
export default {
  components: {
    Input
    // Pagination
  },
  mixins: [Resize],
  data() {
    return {
      activeName: "first",
      status: 1,
      page: 1,
      total: 0,
      size: 10,
      defaultHeight: 280,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      tableData: [],
      value: ""
    };
  },
  created() {
    this.getIntegralList();
  },
  methods: {
    // 排序
    handleBlur(row) {
      // console.log(row, "---row");
      sortIntegral({ id: row.id, sort: row.sort }).then(res => {
        if (res.code == 200) {
          this.$message.success("更新成功");
          this.getIntegralList();
        }
      });
    },
    // 删除积分商品
    delGoods(row) {
      delIntegral({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.getIntegralList();
        }
      });
    },
    // 积分商品上下架
    changeIntegralStatus(row, i) {
      changeIntegralStatus({ id: row.id }).then(res => {
        if (res.code == 200) {
          if (i == 1) {
            this.$message.success("上架成功");
          } else {
            this.$message.success("下架成功");
          }
          this.getIntegralList();
        }
      });
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.page = val;
      this.getIntegralList();
    },
    // 获取积分商品列表数据
    getIntegralList() {
      getIntegralList({
        page: this.page,
        keywords: this.query,
        is_open: this.status
      }).then(res => {
        console.log(res, "---res");
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    handleSearch(query) {
      this.query = query;
      this.getIntegralList();
    },
    handleTabClick() {
      console.log(this.activeName, "---88");
      if (this.activeName == "first") {
        this.status = 1;
      } else {
        this.status = 0;
      }
      this.getIntegralList();
    },
    editClick(row) {
      this.$router.push({ path: "/integral/edit", query: { detail: row } });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
@import "@/styles/el-tab.scss";
@import "@/styles/color.scss";
@import "@/styles/el-button.scss";
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-form-item {
    margin: 0;
  }
}
.bottom {
  margin-top: 20px;
}

.d-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.ml {
  width: 200px;
  word-break: break-all;
  margin-left: 10px;
  text-align: left;
}
.block {
  margin: 40px;
  text-align: center;
}
</style>
